<!-- 这是个人的打卡界面，这个界面主要包含打卡以及打卡状况两部分 -->
<template>
    <div>
        <h1>打卡</h1>
        <el-divider>基本信息</el-divider>
        <div style="height: 400px;">
            <div style="width: 50%;height: 400px;float: left;" id="echarts_clock"></div>
            <div style="float: left;height: 200px;width: 50%;margin-top: 50px;">

                <template v-if="todayWorkshift === ''">
                    <h3>您今日无班次，无需打卡</h3>
                </template>
                <template v-else>
                    <h3>您今日的班次是<span style="color: red;">{{ todayWorkshift }}</span></h3>
                    <p>请进行今日的打卡操作</p>
                </template>

                <template v-if=" todayClockInTime !== ''">
                    <p>今日上班打卡时间 <span style="color: red;"> {{ todayClockInTime }}</span></p>
                </template>

                <template v-if=" todayClockOutTime !== ''">
                    <p>今日下班打卡时间 <span style="color: red;">{{ todayClockOutTime }}</span></p>
                </template>

                <div style="margin-top: 20px;margin-bottom:20px;">
                    <el-button type="primary" @click="clockIn" :disabled="clockInDisabled">签到</el-button>
                </div>
                <div>
                    <el-button type="warning" @click="clockOut" :disabled="clockOutDisabled">签退</el-button>
                </div>
            </div>
        </div>
        <el-divider>打卡日历</el-divider>
        <el-calendar>
            <template slot="dateCell" slot-scope="{date, data}">
                <div>
                    {{ data.day }}
                </div>
                <template v-if="absenceDate.includes(data.day)">
                    <el-tag type="danger">缺勤</el-tag>
                </template>
                <template v-else-if="presenceData.includes(data.day)">
                    <el-tag type="success">正常</el-tag>
                </template>
            </template>
        </el-calendar>
    </div>
</template>

<script>
    import axios from "axios"
    import echarts from "echarts"
    import moment from "moment"

    export default {
        name: "clockInOut",
        data: function() {
            return {
                chooseDate: ['2020-05-04', '2020-05-07'],
                absenceDate: [],
                presenceData: [],
                clockInDisabled: false,
                clockOutDisabled: false,
                currentDay: null,
                currentMonthDetail: [1, 2, 3, 4], //缺勤天数，全勤天数，剩余天数，无需打卡天数
                currentMonth: null,
                todayWorkshift: "",
                todayClockInTime: "",
                todayClockOutTime: ""
            }
        },
        props: {
            user_id: {
                required: false,
                default: null,
                type: Number
            }
        },
        methods: {
            /**
             *  上班打卡 
             */
            clockIn: function() {
                var _this = this;
                axios.post("http://127.0.0.1:8000/api/clock/in/")
                    .then(function(response) {
                        console.log(response.data);
                        if (response.data.status === 0) {
                            _this.$message({
                                message: '恭喜你，上班打卡成功',
                                type: 'success'
                            });
                            _this.getTodayWorkshift();
                        } else {
                            _this.$message({
                                message: "抱歉，上班打卡失败",
                                type: "warning"
                            })
                        }
                    }).catch(function(error) {
                        console.log(error);
                        _this.$message({
                            message: "抱歉，打卡失败",
                            type: "danger"
                        })
                    })
            },

            /**
             *  下班打卡 
             */
            clockOut: function() {
                var _this = this;
                const h = this.$createElement;
                axios.post("http://127.0.0.1:8000/api/clock/out/")
                    .then(function(response) {
                        console.log(response.data);
                        if (response.data.status === 0) {
                            console.log(response)
                            _this.$message({
                                message: '恭喜你，下班打卡成功',
                                type: 'success'
                            });
                            _this.getTodayWorkshift();

                            if (response.data.data !== "") {
                                _this.$notify({
                                    title: '打卡事项',
                                    message: h('i', {
                                        style: 'color: teal'
                                    }, response.data.data)
                                });
                            }

                        } else {
                            _this.$message({
                                message: "抱歉，下班打卡失败",
                                type: "warning"
                            })
                        }
                    }).catch(function(error) {
                        console.log(error);
                        _this.$message({
                            message: "抱歉，打卡失败",
                            type: "danger"
                        })
                    })
            },

            /**
             *  获取缺勤日期 
             */
            getAbsenseDate: function() {
                console.log("this is getAbsenseDate" + this.user_id)
                var _this = this;
                console.log(this.currentMonth.format("YYYY-MM"));
                /* 请求获取数据 */
                axios.post("http://127.0.0.1:8000/api/clock/absence/user/", JSON.stringify({
                        user_id: _this.user_id,
                        month: _this.currentMonth.format("YYYY-MM")
                    }))
                    .then(function(response) {
                        console.log(response);
                        _this.absenceDate = response.data.data.absence_all;
                        _this.presenceData = response.data.data.presence_all;
                        console.log(_this.absenceDate);
                        // _this.absenceDate.forEach(function(item, index) {
                        //     // console.log(item.date);
                        //     _this.absenceDate[index] = item.date.split("-").slice(0, 3).join("-");
                        //     // console.log(item.date.split("-").slice(0, 3).join("-"));
                        //     // console.log(item);
                        // })
                    }).catch(function(error) {
                        console.log(error);
                    })
            },

            /**
             *  绘制饼状图 
             */
            drawPie: function() {
                var echarts_clock = echarts.init(document.getElementById("echarts_clock"));
                var option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 10,
                        data: ['缺勤天数', '全勤天数', '本月剩余', '无需打卡']
                    },
                    series: [{
                        name: '本月打卡情况',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: true
                        },
                        data: [{
                                value: this.currentMonthDetail[0],
                                name: '缺勤天数',
                                itemStyle: {
                                    color: "#AA0000"
                                }

                            },
                            {
                                value: this.currentMonthDetail[1],
                                name: '全勤天数',
                                itemStyle: {
                                    color: "#009900"
                                }
                            },
                            {
                                value: this.currentMonthDetail[2],
                                name: '本月剩余',
                                itemStyle: {
                                    color: "#999999"
                                }
                            },
                            {
                                value: this.currentMonthDetail[3],
                                name: '无需打卡',
                                itemStyle: {
                                    color: "#000000"
                                }
                            }
                        ]
                    }]
                };
                echarts_clock.setOption(option);
            },

            /**
             * @description 当前的日期的格式化限制
             */
            getCurrentDay: function() {
                var date = new Date();
                console.log(date.getDay());
                this.currentDay = date.getFullYear();
                if (date.getMonth() < 9) {
                    this.currentDay += "-0" + String(date.getMonth() + 1);
                } else {
                    this.currentDay += "-" + String(date.getMonth() + 1);
                }

                if (date.getDate() < 10) {
                    this.currentDay += "-0" + String(date.getDate());
                } else {
                    this.currentDay += "-" + String(date.getDate());
                }
                console.log("currentday is " + this.currentDay);
            },

            /**
             * @description  获取饼状图的数据
             */
            getCurrentMonthDetail: function() {
                console.log("this is getCurrentMonthDetail");
                var _this = this;
                axios.get("http://127.0.0.1:8000/api/clock/month/", {
                        params: {
                            user_id: _this.user_id
                        }
                    })
                    .then(function(response) {
                        console.log(response);
                        _this.currentMonthDetail = response.data.data;
                        console.log(_this.currentMonthDetail);
                        _this.drawPie();
                    })
                    .catch(function(error) {
                        console.log(error);
                    });
            },

            /**
             * @description 获取今日是否有班次
             */
            getTodayWorkshift: function() {
                var _this = this;
                axios.get("http://127.0.0.1:8000/api/workshift/reminder/")
                    .then(function(response) {
                        _this.todayWorkshift = response.data.data.workshift;
                        _this.todayClockInTime = response.data.data.clock_in;
                        _this.todayClockOutTime = response.data.data.clock_out;
                    })
                    .catch(function(error) {
                        console.log(error);
                    })

            }

        },
        watch: {
            user_id: function() {
                this.getAbsenseDate();
                console.log("This iss wat ch users d");
                console.log("user_id" + this.user_id);
                console.log("watch user_id" + this.user_id);
                if (this.user_id != null) {
                    console.log("watch user_id")
                    this.clockInDisabled = true;
                    this.clockOutDisabled = true;
                    this.getAbsenseDate();
                    this.getCurrentMonthDetail();
                }
            }
        },
        mounted: function() {
            // console.log("这里是加载 clockInOut");

            if (this.user_id !== null) {
                this.clockInDisabled = true;
                this.clockOutDisabled = true;
            }
            // console.log("这里是加载 clockInOut");
            this.getTodayWorkshift();
            this.currentMonth = moment();
            this.getAbsenseDate();
            this.getCurrentMonthDetail();
            var _this = this;

            this.$nextTick(() => {
                // 点击前一个月
                let prevBtn = document.querySelector(
                    '.el-calendar__button-group .el-button-group>button:nth-child(1)');
                prevBtn.addEventListener('click', () => {
                    _this.currentMonth.add(-1, "M");
                    _this.getAbsenseDate();
                    console.log(this.value);
                })
            });
            this.$nextTick(() => {
                // 点击后一个月
                let prevBtn = document.querySelector(
                    '.el-calendar__button-group .el-button-group>button:last-child');
                prevBtn.addEventListener('click', () => {
                    _this.currentMonth.add(1, "M");
                    _this.getAbsenseDate();
                    console.log(this.value);
                })
            });

        },
    }
</script>

<style>
    /* 日历，缺勤 */
    .clockLast {
        /*color: red;*/
        background: pink;
        height: 100%;
    }

    /* 日历，正常 */
    .clockCor {
        /*color: green;*/
        background-color: lightgreen;
        height: 100%;
    }
</style>
